<template>
    <el-container>
        <el-header :height="'auto'" class="mb20">
            <breadcrumb :title="'我的资源'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="resTableLoading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-select v-model="state" placeholder="请选择实施状态" class="select" size="small">
                                <el-option
                                    v-for="item in stateList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="type" placeholder="请选择类型" class="select" size="small">
                                <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-input v-model="resName" placeholder="请输入搜索内容" class="input" size="small"></el-input>
                            <el-button class="primary" @click="getList()" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example :data="resTableData" :tableColumn="resTableHeader" :slotColumns="resTableSlotColumns"
                                   :height="'100%'" ref="resTable">
                        <template slot="resName" slot-scope="scope">
                            <el-link type="primary" :underline="false"
                                     @click="$router.push($route.path + '/resDetail/'+scope.row.resId+'?order='+scope.row.implementationWorkOrder)">
                                {{scope.row.resName}}
                            </el-link>
                        </template>
                        <template slot="resState" slot-scope="scope">
                            <span>{{scope.row.resState==1?'正常':'异常'}}</span>
                        </template>
                        <template slot="resType" slot-scope="scope">
                            <span>{{scope.row.resType==1?'服务接口类':(scope.row.resType==2?'服务页面类':'数据交换类')}}</span>
                        </template>
                        <template slot="implementationState" slot-scope="scope">
                            <span v-if="scope.row.implementationState==0">实施中</span>
                            <span v-else-if="scope.row.implementationState==1">已完成</span>
                            <span v-else-if="scope.row.implementationState==2">已中止</span>
                            <span v-else-if="scope.row.implementationState==3">已回收</span>
                            <span v-else-if="scope.row.implementationState==4">待回收</span>
                        </template>
                        <template slot="operate" slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="openDialog(scope.row.id)"
                                     v-if="scope.row.resType==2">权限配置
                            </el-link>
                            <el-link type="primary" :underline="false" @click="downLoad(scope.row)"
                                     v-else-if="scope.row.resType==1">下载文档
                            </el-link>
                            <el-link type="primary" :underline="false" @click="openRecycleDialog(scope.row)"
                                     v-if="scope.row.implementationState==1">申请资源回收
                            </el-link>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="resTablePage" v-if="resTablePage" class="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <dialog-msk :show.sync="show" ref="dialog" :width="'960px'" :title="'权限管理'">
                <div v-loading="approveResTableLoading">
                    <div class="toolbar">
                        <div>
                            <select-tree @loadNode="loadNode"
                                         v-if="show"
                                         :loading.sync="provideDeptTree.loading"
                                         :renderTree.sync="provideDeptTree.renderTree"
                                         :lazy.sync="provideDeptTree.lazy"
                                         :clearable.sync="provideDeptTree.clearable"
                                         :filterable.sync="provideDeptTree.filterable"
                                         :model.sync="dept"
                                         :accordion.sync="provideDeptTree.accordion"
                                         :expandAll.sync="provideDeptTree.expandAll"
                                         :provideDeptTree="provideDeptTree"
                                         @filterMethod="dataFilter"
                                         :props="dataConsumersprops"
                                         :options="provideDeptTree.options"
                                         @nodeClick="treeNodeClick">
                            </select-tree>
                            <el-input v-model="userName" placeholder="请输入姓名/账号" class="input" size="small"></el-input>
                            <el-button class="primary" @click="etDeptPerList(1)" size="small">查询</el-button>
                        </div>
                        <div class="text-right">
                            <el-button class="minor limit" @click="approveRes(1)" size="small">一键取消</el-button>
                            <el-button type="minor limit" @click="approveRes(0)" size="small">一键授权</el-button>
                        </div>
                    </div>
                    <table-example :data="approveResTableData" :tableColumn="approveResTableHeader"
                                   :slotColumns="approveResTableSlotColumns"
                                   class="mt10">
                        <template slot="operate" slot-scope="scope">
                            <el-link type="primary" v-if="scope.row.isHave==1" @click="isApproveRes(scope.row)">取消授权
                            </el-link>
                            <el-link type="primary" v-else @click="isApproveRes(scope.row)">授权</el-link>
                        </template>
                        <template slot="state" slot-scope="scope">
                            <span v-if="scope.row.state==1">上架</span>
                            <span v-else-if="scope.row.state==2" class="error">下架</span>
                        </template>
                    </table-example>
                    <page :data="approveResTablePage" v-if="approveResTablePage" class="mt20 page1"
                          @jumpPage="etDeptPerList"></page>
                </div>
                <span slot="footer">
            </span>
            </dialog-msk>
            <dialog-msk :show.sync="showEdit" ref="explainEdit" :title="'输入申请资源回收理由'" :width="'450px'"
                        @save="saveDialog" @cancel="closeDialog">
                <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm"
                         size="small" label-width="0px" :label-position="'left'" v-if="currentList">
                    <el-form-item prop="remark">
                        <el-input type="textarea" v-model="ruleForm.remark" size="small"
                                  :autosize="{ minRows: 4, maxRows: 4}"></el-input>
                    </el-form-item>
                </el-form>
            </dialog-msk>
            <transition name="slide">
                <router-view></router-view>
            </transition>
        </el-main>
    </el-container>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import dialogMsk from '../../components/dialog'
    import page from '../../components/pagination'
    import selectTree from '../../components/select-tree'

    export default {
        data() {
            return {
                stateList: [
                    {
                        value: '',
                        label: ''
                    },
                    // {
                    //     value: '1',
                    //     label: '全部'
                    // },
                    {
                        value: '1',
                        label: '已完成'
                    },
                    {
                        value: '3',
                        label: '已回收'
                    },
                    {
                        value: '4',
                        label: '资源待回收'
                    }
                ],
                state: '',
                typeList: [
                    {
                        value: '',
                        label: ''
                    },
                    {
                        value: '1',
                        label: '服务接口类'
                    },
                    {
                        value: '2',
                        label: '数据交换类'
                    },
                    {
                        value: '3',
                        label: '服务页面类'
                    }
                ],
                type: '',
                resName: '',
                approveResTableData: [], // 应用列表数据
                approveResTableHeader: [
                    {
                        prop: 'ownDeptName',
                        label: '部门',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'name',
                        label: '姓名',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'state',
                        label: '应用当前状态',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operate',
                        label: '操作',
                        minWidth: '100',
                        align: 'center',
                        fixed: 'right'
                    }
                ], // 应用列表表头
                approveResTableSlotColumns: ['operate', 'state'], // 应用列表自定义列
                approveResTablePage: {}, // 应用列表分页数据
                resTableData: [], // 授权人员列表
                resTableHeader: [
                    {
                        prop: 'resName',
                        label: '资源名称',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resUniqueCode',
                        label: '资源唯一标识符',
                        minWidth: '180',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'implementationWorkOrder',
                        label: '实施工单号',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resType',
                        label: '资源类型',
                        minWidth: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resourceConsumers',
                        label: '资源消费者',
                        minWidth: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'approvalTime',
                        label: '审批时间',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resState',
                        label: '资源状态',
                        minWidth: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'implementationState',
                        label: '实施状态',
                        minWidth: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operate',
                        label: '操作',
                        minWidth: '120',
                        align: 'center',
                        fixed: 'right'
                    }
                ], // 授权人员表头
                resTableSlotColumns: ['resName', 'resState', 'resType', 'implementationState', 'operate'], // 授权人员列表自定义列
                resTablePage: {}, // 授权人员列表分页数据
                show: false,
                resTableLoading: false, // 外容器loading
                approveResTableLoading: false, // 授权列表loading
                resTableIndex: 1,
                approveResTableIndex: 1,
                userName: '', // 授权人员-用户名
                deptList: [],
                getDtFirst: false,
                currentApp: '',
                dept: { // 授权人员-部门信息
                    value: '',
                    label: ''
                },
                ruleForm: {
                    remark: ''
                },
                rules: {
                    remark: [
                        {required: true, message: '请输入原因', trigger: 'blur'}
                    ]
                },
                currentList: null,
                showEdit: false, // 填写回收原因
                dataConsumersprops: {
                    value: 'code', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                }, // 数据源部门
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: []
                }
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            downLoad(row) {
                let api = window.localStorage.getItem('ajaxApi') || '/_api'
                window.open(location.origin + api + '/rdResManagement/downloadResWord?resId=' + row.resId, '_blank')
            },
            getList(index) {
                this.resTableLoading = true
                if (index) this.resTableIndex = index
                this.$http.get('/deptAdmin/getMyUserList', {
                    current: this.resTableIndex || 1,
                    size: 15,
                    resName: this.resName || '',
                    implementationState: Number(this.state) || '',
                    resType: this.type || null
                }).then(result => {
                    this.resTableLoading = false
                    if (result.success) {
                        if (result.data.records) {
                            this.resTableData = result.data.records
                            this.resTablePage = result.data
                            delete this.resTablePage['records']
                        }
                        if (!this.getDtFirst) {
                            this.getDtList()
                            this.getDtFirst = true
                        }
                    }
                }).catch(() => {
                    this.resTableLoading = false
                })
            },
            getDtList() {
                this.resTableLoading = true
                this.$http.get('/admin/getDeptList').then(result => {
                    this.resTableLoading = false
                    if (result.success) {
                        result.data.forEach(item => {
                            if (item.expand) {
                                item.isLeaf = false
                            } else {
                                item.isLeaf = true
                            }
                            if (!item.label) {
                                item.label = item.abbreviation || item.name
                            }
                        })
                        this.deptList = result.data
                    }
                }).catch(() => {
                    this.resTableLoading = false
                })
            },
            openDialog(id) {
                this.currentApp = id
                if (this.deptList[0]) {
                    this.dept = {
                        value: this.deptList[0].id,
                        label: this.deptList[0].name
                    }
                }
                this.show = true
                this.etDeptPerList()
            },
            openRecycleDialog(row) {
                this.currentList = row
                this.showEdit = true
            },
            saveDialog() {
                let _this = this
                this.validate('ruleForm', () => {
                    this.recycle(function () {
                        _this.showEdit = false
                        _this.closeDialog()
                    })
                })
            },
            closeDialog() {
                this.$refs.ruleForm.resetFields()
                this.ruleForm = {
                    remark: ''
                }
                this.currentList = null
                this.showEdit = false
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            recycle(callback) {
                let form = this.ruleForm
                this.showEdit = false
                this.resTableLoading = true
                this.$http.post('/rdResourceApplicationDetail/retrieveResource', {
                    resId: this.currentList.resId,
                    id: this.currentList.id,
                    retrieveReason: form.remark
                }).then(result => {
                    this.resTableLoading = false
                    if (result.success) {
                        this.getList()
                        this.$message.success({
                            message: '申请资源回收成功',
                            showClose: true
                        })
                    }
                    if (callback) callback()
                }).catch(() => {
                    this.resTableLoading = false
                })
            },
            etDeptPerList(index) {
                this.approveResTableLoading = true
                if (index) this.approveResTableIndex = index
                this.$http.get('/rdResManagement/getDeptPerList', {
                    current: this.approveResTableIndex || 1,
                    size: 5,
                    deptId: this.dept.value,
                    resId: this.currentApp,
                    userName: this.userName
                }).then(result => {
                    this.approveResTableLoading = false
                    if (result.success) {
                        this.approveResTableData = result.data.records
                        this.approveResTablePage = result.data
                        delete this.approveResTablePage['records']
                    }
                }).catch(() => {
                    this.approveResTableLoading = false
                })
            },
            approveRes(type) {
                this.approveResTableLoading = true
                this.$http.post('/rdResManagement/oneKeyIsApprovalRes', {
                    deptId: this.dept.value,
                    resId: this.currentApp,
                    userName: this.userName,
                    type: type
                }).then(result => {
                    this.approveResTableLoading = false
                    if (result.success) {
                        this.etDeptPerList()

                    }
                }).catch(() => {
                    this.approveResTableLoading = false
                })
            },
            isApproveRes(row) {
                this.approveResTableLoading = true
                this.$http.post('/rdResManagement/isApprovalRes', {
                    resId: this.currentApp,
                    userId: row.id
                }).then(result => {
                    this.approveResTableLoading = false
                    if (result.success) {
                        row.isHave = !row.isHave ? 1 : 0
                    }
                }).catch(() => {
                    this.approveResTableLoading = false
                })
            },
            // 获取树形结构数据-搜索
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.$http.get('/admin/getDeptList', {
                            keyWord: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        if (callback) callback()
                    }, 300)
                }

            },
            loadNode(parentId, callback) {
                if (!parentId && this.deptList[0]) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.deptList)
                } else {
                    this.$http.get('/admin/getDeptList', {
                        deptId: parentId || ''
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    if (item.expand) {
                                        item.isLeaf = false
                                    } else {
                                        item.isLeaf = true
                                    }
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data)
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                    })
                }
            },
            reset() {
                this.resName = ''
                this.state = null
                this.type = null
                this.getList(1)
            }
        },
        components: {
            tableExample,
            dialogMsk,
            page,
            breadcrumb,
            selectTree
        }
    }
</script>
<style scoped lang="less">
    .right {
        float: right;
    }
</style>
